<template>
  <view :style="warpCss">

    <view class="rounded-t-[16rpx] flex items-center justify-between style-bg-1 py-[20rpx] px-[30rpx]">
      <view class="flex items-end">
        <image :src="img('static/resource/images/diy/member/VIP_02.png')" mode="aspectFit" class="w-[50rpx] h-[36rpx]" />
        <text class="text-[28rpx] text-[#FFDAA8] ml-[10rpx] font-bold max-w-[440rpx] truncate">{{ diyComponent.text }}</text>
      </view>
      <view class="flex items-center justify-center rounded-[30rpx] box-border style-btn w-[120rpx] h-[50rpx]" @click="toLink()">
        <!--        <text class="text-[24rpx] text-[#333]">{{ info.member_level ? (upgradeGrowth > 0 ? '去升级' : '去查看') : '去解锁' }}</text>-->
        <text class="text-[24rpx] text-[#333]">查看</text>
        <text class="iconfont iconxiayibu1 ml-[2rpx] !text-[20rpx] text-[#333]"></text>
      </view>
    </view>

    <!--		<view class="diy-text relative">-->
    <!--			<view class="px-[20rpx] py-[30rpx] flex items-center justify-between">-->
    <!--				<view @click="diyStore.toRedirect(diyComponent.link)">-->
    <!--					<view class="max-w-[200rpx] truncate leading-[1]" :style="{ fontSize: diyComponent.fontSize * 2 + 'rpx', color: diyComponent.textColor, fontWeight: diyComponent.fontWeight }">-->
    <!--						{{ diyComponent.text }}-->
    <!--					</view>-->
    <!--				</view>-->
    <!--			</view>-->
    <!--		</view>-->
    <view class="pb-[30rpx] px-[20rpx] flex items-center text-center">
      <view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toVIP()">
        <view class="relative w-[44rpx] h-[44rpx]">
          <image class="w-[44rpx] h-[44rpx]" :src="img('addon/jiangsu_shop/diy/member/shop.png')" />
        </view>
        <view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">VIP商城</view>
      </view>
      <view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toMyCommissionList()">
        <view class="relative w-[44rpx] h-[44rpx]">
          <image class="w-[44rpx] h-[44rpx]" :src="img('addon/jiangsu_shop/diy/member/order.png')" />
        </view>
        <view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">佣金</view>
      </view>
      <view class="flex flex-col items-center w-[20%] flex-shrink-0" @click="toRebateOrderlist()">
        <view class="relative w-[44rpx] h-[44rpx]">
          <image class="w-[44rpx] h-[44rpx]" :src="img('addon/jiangsu_shop/diy/member/order_member.png')" />
        </view>
        <view class="mt-[14rpx]" :style="{
					fontSize: diyComponent.item.fontSize * 2 + 'rpx',
					color: diyComponent.item.color,
					fontWeight: diyComponent.item.fontWeight
				}">佣金订单</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed, watch,onMounted } from 'vue';
import useDiyStore from '@/app/stores/diy';
import { img,redirect } from '@/utils/common';

const props = defineProps(['component', 'index', 'pullDownRefreshCount']);
const diyStore = useDiyStore();
const diyComponent = computed(() => {
  if (diyStore.mode == 'decorate') {
    return diyStore.value[props.index];
  } else {
    return props.component;
  }
})

onMounted(() => {
  refresh();
});

watch(
    () => diyComponent.value,
    (newValue, oldValue) => {
      refresh();
    },{deep: true})

const refresh = () => {
  // 装修模式
  if (diyStore.mode == 'decorate') {
  } else {
  }
}

const warpCss = computed(() => {
  var style = '';
  style += 'position:relative;';
  if(diyComponent.value.componentStartBgColor) {
    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
    else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
  }

  if(diyComponent.value.componentBgUrl) {
    style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
    style += 'background-size: cover;background-repeat: no-repeat;';
  }

  if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
  if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
  // if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
  //if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
  return style;
})

const toVIP = () => {
  redirect({ url: '/addon/jiangsu_shop/pages/rebate/list'})
}

const toMyCommissionList = () => {
  redirect({ url: '/app/pages/member/commission' })
}

const toRebateOrderlist = () => {
  redirect({ url: '/addon/jiangsu_shop/pages/rebate/my_rebate_order_list' })
}

// 跳转链接
const toLink = () =>{
  redirect({ url: '/addon/jiangsu_shop/pages/rebate/rebate_rules' })
}
</script>

<style>
</style>